<template>
  <a-spin :spinning="loading">
    <a-card style="margin-top: 24px" :bordered="false" title="马氏工作倦怠评估">
      <a-button slot="extra" type="danger" @click="exit"> 返回首页 </a-button>
      <div class="table-operator" style="border-top: 5px">
        <a-button type="danger" @click="add" :disabled="buttonStatus"> 填写量表 </a-button>
      </div>

      <a-tabs v-model="activeKey" hide-add @click="changeBurnout()" @edit="onEdit">
        <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
          {{ pane.content }}
        </a-tab-pane>
      </a-tabs>
      <div class="container">
        <div class="width90">
          <a-form-model-item layout="inline" label="评估结果" v-if="evalution1.output">
            <span class="ant-form-text">
              {{ evalution1.output }}
            </span>
          </a-form-model-item>
          <a-form-model-item label="1.工作让我感觉身心疲惫">
            <a-radio-group v-model="radios.radio1" :options="options" />
          </a-form-model-item>
          <a-form-model-item label="2.一天的工作结束后，我会感觉筋疲力尽">
            <a-radio-group v-model="radios.radio2" :options="options" />
          </a-form-model-item>
          <a-form-model-item label="3.想到要开始新的一天的工作，我就会有一种疲惫感">
            <a-radio-group v-model="radios.radio3" :options="options" />
          </a-form-model-item>
          <a-form-model-item label="4.工作真的是一件非常累的事情">
            <a-radio-group v-model="radios.radio4" :options="options" />
          </a-form-model-item>
          <a-form-model-item label="5.工作让我有快崩溃的感觉">
            <a-radio-group v-model="radios.radio5" :options="options" />
          </a-form-model-item>
          <a-form-model-item label="6.自从开始干这份工作，我对工作越来越不感兴趣">
            <a-radio-group v-model="radios.radio6" :options="options" />
          </a-form-model-item>
          <a-form-model-item label="7.我对工作不像以前那么热心了">
            <a-radio-group v-model="radios.radio7" :options="options" />
          </a-form-model-item>
          <a-form-model-item label="8.我怀疑自己所做的工作的意义">
            <a-radio-group v-model="radios.radio8" :options="options" />
          </a-form-model-item>
          <a-form-model-item label="9.我对自己所做的工作是否有贡献越来越不关心">
            <a-radio-group v-model="radios.radio9" :options="options" />
          </a-form-model-item>
          <a-form-model-item label="10.我能有效地解决我工作中出现的问题">
            <a-radio-group v-model="radios.radio10" :options="options" />
          </a-form-model-item>
          <a-form-model-item label="11.我觉得我在为单位作贡献">
            <a-radio-group v-model="radios.radio11" :options="options" />
          </a-form-model-item>
          <a-form-model-item label="12.我认为自己擅长自己的工作">
            <a-radio-group v-model="radios.radio12" :options="options" />
          </a-form-model-item>
          <a-form-model-item label="13.当完成工作上的一些事情时，我感到非常高兴">
            <a-radio-group v-model="radios.radio13" :options="options" />
          </a-form-model-item>
          <a-form-model-item label="14.我感到我完成了很多有价值的工作">
            <a-radio-group v-model="radios.radio14" :options="options" />
          </a-form-model-item>
          <a-form-model-item label="15.我自信自己能有效地完成各项工作">
            <a-radio-group v-model="radios.radio15" :options="options" />
          </a-form-model-item>

          <div class="footer" v-if="!evalution1.output">
            <a-button
              :loading="saveLoading"
              style="margin-left: 500px; margin-top: 15px; margin-bottom: 1px"
              type="danger"
              @click="postBurnout()"
            >
              评估
            </a-button>
          </div>
        </div>
      </div>
    </a-card>
  </a-spin>
</template>

<script>
import { EvalutionMixin } from '@/mixins/EvalutionMixin'
import { PAGE_MENU_TYPE } from '@/store/mutation-types'

const options = [
  {
    value: 1,
    label: '从来没有这种感觉'
  },
  {
    value: 2,
    label: '几乎没有这种感觉'
  },
  {
    value: 3,
    label: '很少出现这种感觉'
  },
  {
    value: 4,
    label: '有时出现'
  },
  {
    value: 5,
    label: '有点频繁的出现'
  },
  {
    value: 6,
    label: '比较频繁的出现'
  },
  {
    value: 7,
    label: '非常频繁的出现'
  }
]

export default {
  name: 'Burnout',
  mixins: [EvalutionMixin],
  data() {
    var panes = []

    return {
      sas: {},
      evalution1: {
        output: ''
      },
      queryParam: { patientId: this.$route.query[PAGE_MENU_TYPE.PatientId] },
      buttonStatus: false,
      savaRes: [],
      input: [],
      options,
      radios: {
        radio1: '',
        radio2: '',
        radio3: '',
        radio4: '',
        radio5: '',
        radio6: '',
        radio7: '',
        radio8: '',
        radio9: '',
        radio10: '',
        radio11: '',
        radio12: '',
        radio13: '',
        radio14: '',
        radio15: ''
      },
      activeKey: panes.content,
      panes,
      newTabIndex: 0,
      url: {
        postBurnout: '105/43/1054301',
        getBurnout: '105/43/1054303'
      }
    }
  },
  created() {
    this.getBurnout()
  },
  methods: {
    callback(key) {
      console.log(key)
    },
    onEdit(targetKey, action) {
      this[action](targetKey)
    },
    exit() {
      const patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      let query = {}
      query[PAGE_MENU_TYPE.ParamsField] = PAGE_MENU_TYPE.HealthManage
      query[PAGE_MENU_TYPE.PatientId] = patientId
      this.$router.push({
        path: '../index',
        query
      })
    },

    add() {
      this.buttonStatus = true
      this.radios = []
      this.evalution1.output = ''
      const panes = this.panes
      const activeKey = `newTab${this.newTabIndex++}`
      panes.unshift({
        title: '请开始填写',
        key: activeKey,
        closable: false
      })
      this.panes = panes
      this.activeKey = activeKey
    },
    remove(targetKey) {
      let activeKey = this.activeKey
      let lastIndex
      this.panes.forEach((pane, i) => {
        if (pane.key === targetKey) {
          lastIndex = i - 1
        }
      })
      const panes = this.panes.filter(pane => pane.key !== targetKey)
      if (panes.length && activeKey === targetKey) {
        if (lastIndex >= 0) {
          activeKey = panes[lastIndex].key
        } else {
          activeKey = panes[0].key
        }
      }
      this.panes = panes
      this.activeKey = activeKey
    }
  }
}
</script>
<style scoped>
.container {
  background-color: #fff;
  margin: 0 auto;
}
.title {
  width: 100%;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  color: #333333;
  margin: 15px 0;
}
/* .footer {
  text-align: center;
} */
.tall-text {
  font-size: 12px;
  margin: 20px auto;
  background-color: #f7f7f7;
  padding: 10px;
  border-radius: 5px;
}
p {
  margin: 5px;
}
.eval_p {
  margin: 15px 10px;
}
.eval_diet {
  margin-top: 15px;
  font-size: 16px;
}
.width90 {
  width: 90%;
  margin: 0 auto;
}
</style>
